<template>
  <view class="room-edit-page">
	<status-bar backgroundColor="rgb(255, 255, 255)"></status-bar>
    <view class="header-bar">
      <uni-icons type="left" size="54rpx" @click="navBack" />
      <text class="title">房间编辑</text>
      <uni-icons type="checkmarkempty" size="54rpx" @click="saveEdit" />
    </view>
    
    <view class="section">
      <view class="section-item" @click="editRoomName">
        <text class="label">名称</text>
        <view class="right-content">
          <text class="room-name">{{ isAll ? '全部' : roomName }}</text>
          <uni-icons v-if="!isAll" type="right" size="30rpx" color="#999" />
        </view>
      </view>
    </view>

    <view class="section" @click="chooseWallpaper">
      <view class="section-item">
        <text class="label">房间壁纸</text>
        <view class="right-content">
          <uni-icons type="right" size="30rpx" color="#999" />
        </view>
      </view>
      <view class="wallpaper-preview">
        <view class="wallpaper-preview-img" :style="{ background: selectedWallpaper}"></view>
      </view>
    </view>

    <view class="module-title">模块编辑</view>
    <view class="module-list">
      <view class="module-item" v-for="(item, idx) in modules" :key="idx">
        <text class="module-label">{{ item.label }}</text>
        <switch :checked="item.checked" @change="toggleModule(idx)" color="#00C48F" />
      </view>
    </view>
    <view class="long-offline-tip">
      <text>设备离线30天及以上为长期离线</text>
    </view>
    <uni-popup ref="wallpaperPopup" type="bottom">
      <view class="wallpaper-popup">
        <view class="popup-header">
          <text class="popup-title">选择壁纸</text>
          <text class="popup-close" @click="closeWallpaperPopup">完成</text>
        </view>
        <view class="wallpaper-grid">
          <view 
            v-for="(wp, i) in wallpaperList" 
            :key="i" 
            class="wallpaper-option"
            :class="{ active: selectedWallpaper === wp }"
            @click="selectWallpaper(wp)"
          >
            <view class="wallpaper-color" :style="{ background: wp }"></view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import UniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
import { _modifyrooms } from '@/service/room.js';

export default {
  components: { UniIcons, UniPopup },
  data() {
    return {
      roomName: '',
      serialnum_room: '',
      account_user: '',
      isAll: false,
      selectedWallpaper: '',
      wallpaperList: [
        'linear-gradient(180deg, #8cceba 0%, #ffffff 70%)',
        'linear-gradient(180deg, #a5d6a7 0%, #ffffff 70%)',
        'linear-gradient(180deg, #90caf9 0%, #ffffff 70%)',
        'linear-gradient(180deg, #ce93d8 0%, #ffffff 70%)',
        'linear-gradient(180deg, #ffcc80 0%, #ffffff 70%)',
        'linear-gradient(180deg, #f48fb1 0%, #ffffff 70%)',
        'linear-gradient(180deg, #80cbc4 0%, #ffffff 70%)',
        'linear-gradient(180deg, #b39ddb 0%, #ffffff 70%)',
        'linear-gradient(180deg, #ffab91 0%, #ffffff 70%)',
      ],
      modules: [
        { label: '手动控制', checked: true },
        { label: '灯光聚合', checked: false },
        { label: '环境聚合', checked: false },
        { label: '摄像机聚合', checked: false },
        { label: '长期离线设备聚合', checked: false },
      ],
      roomWallpapers: {}, // 存储每个房间的壁纸
    };
  },
  computed: {
    currentWallpaperStyle() {
      // return uni.getStorageSync(this.serialnum_room+"wallpaper");
	  return this.selectedWallpaper
    }
  },
  onLoad(options) {
    this.roomName = options.roomName || '';
    this.serialnum_room = options.roomSerialnum || '';
    this.account_user = options.accountNum || '';
    this.isAll = options.isAll === 'true';
	console.log(uni.getStorageSync(this.serialnum_room + "wallpaper"))
    const saved = uni.getStorageSync(this.serialnum_room + "wallpaper");
    this.selectedWallpaper = saved ||this.wallpaperList[0] ;

  },
  methods: {
    navBack() {
      uni.navigateBack();
    },
    editRoomName() {
      if (!this.isAll) {
        uni.navigateTo({
          url: `/pages/modifyroomname/modifyroomname?roomName=${this.roomName}&roomSerialnum=${this.serialnum_room}`
        });
      }
    },
    chooseWallpaper() {
      this.$refs.wallpaperPopup.open();
    },
    closeWallpaperPopup() {
      this.$refs.wallpaperPopup.close();
    },
    selectWallpaper(wp) {
      this.selectedWallpaper = wp;
	  uni.setStorageSync(this.serialnum_room+"wallpaper",wp)
    },
    toggleModule(idx) {
      this.modules[idx].checked = !this.modules[idx].checked;
    },
    async saveEdit() {
      if (!this.roomName && !this.isAll) {
        this.$api.msg('房间名称不能为空');
        return;
      }
      

      uni.navigateBack();
    },
  },
};
</script>

<style scoped lang="scss">
.room-edit-page {
  background: #f7f7f7;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx 20rpx 30rpx;
  background: #fff;
  margin-bottom: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
}

.section {
  background: #fff;
  margin: 0 24rpx 20rpx 24rpx;
  padding: 20rpx 24rpx 20rpx 24rpx;
  border-radius: 24rpx;
  transition: background-color 0.2s ease;
  
  &:active {
    background: #fafafa;
  }
}

.section-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 24rpx;
  border-bottom: 1rpx solid #f5f5f5;
  transition: background-color 0.2s ease;
  
  &:active {
    background: #fafafa;
  }
  
  &:last-child {
    border-bottom: none;
  }
}

.label {
  font-size: 32rpx;
  color: #222;
  font-weight: 500;
  //margin-bottom: 24rpx;
}

.right-content {
  display: inline-flex;
  align-items: center;
  gap: 16rpx; /* 图标与文字之间留点空隙 */
}


.room-name {
  font-size: 32rpx;
  color: #666;
  margin-right: 16rpx;
}

.wallpaper-preview {
  display: flex;
  justify-content: center;
  height: 300rpx;
  border-radius: 24rpx;
  overflow: hidden;
  margin-bottom: 10rpx;
  margin-top: 10rpx;
}

.wallpaper-preview-img {
  width: 100%;
  height: 100%;
  background-size: cover !important;
  background-position: center !important;
}

.module-title {
  margin: 40rpx 24rpx 16rpx 24rpx;
  color: #999;
  font-size: 28rpx;
}

.module-list {
  background: #fff;
  margin: 0 24rpx;
  border-radius: 24rpx;
  overflow: hidden;
}

.module-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 24rpx;
  border-bottom: 1rpx solid #f5f5f5;
  transition: background-color 0.2s ease;
  
  &:active {
    background: #fafafa;
  }
  
  &:last-child {
    border-bottom: none;
  }
}

.module-label {
  font-size: 32rpx;
  color: #222;
}

.long-offline-tip {
  margin: 24rpx;
  color: #999;
  font-size: 24rpx;
}

.wallpaper-popup {
  background: #fff;
  padding: 32rpx 24rpx;
  border-radius: 24rpx 24rpx 0 0;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  margin-bottom: 20rpx;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #222;
}

.popup-close {
  font-size: 28rpx;
  color: #44cdbd;
  padding: 10rpx 20rpx;
  transition: opacity 0.2s ease;
  
  &:active {
    opacity: 0.7;
  }
}

.wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  padding: 20rpx 0;
}

.wallpaper-option {
  aspect-ratio: 1;
  border-radius: 12rpx;
  overflow: hidden;
  border: 2rpx solid #eee;
  transition: all 0.2s ease;
  
  &.active {
    border: 2rpx solid #44cdbd;
    transform: scale(0.95);
  }
  
  &:active {
    transform: scale(0.95);
    border: 2rpx solid #44cdbd;
  }
}

.wallpaper-color {
  width: 100%;
  height: 100%;
  background-size: cover !important;
  background-position: center !important;
}
</style>